<!DOCTYPE HTML>
<html>
<head>
    <title>活动报名</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<div class="newsletter" style="font-family: STKaiti, LiSu, sans-serif;">
    <div class="newsletter-main">
        <div class="stamp">
            <img src="http://r2g91o0lz.hn-bkt.clouddn.com/b.png" alt="">
        </div>
        <h1>活动报名</h1>
        <h3></h3>
        <div class="design">
            <img src="http://r2g91o0lz.hn-bkt.clouddn.com/design.png">
        </div>
        <p style="text-align: left;"><span th:text="${name}"></span>! 您好：</p>
        <p style="text-align: left;">&nbsp;&nbsp;现诚邀您参加明天中午的篮球活动</p>
        <p style="text-align: left;font-size: smaller;">&nbsp;&nbsp;如您可以准时参加,请点击"参加"按钮。</p>
        <p style="text-align: left;font-size: smaller;">&nbsp;&nbsp;报名截止时间为活动当天的10：40分！</p>
        <p style="text-align: left;font-size: smaller;">&nbsp;&nbsp;活动地点：<a th:href="@{https://j.map.baidu.com/51/kGnc}">V领地青年社区西侧篮球场</a>或关注群内通知！</p>
        <p style="text-align: center;font-size: 12px;color: gray">如果觉得此邮件打扰到您，请点击"退订",将不再继续发送！</p>
        <br/>
        <div style="text-align: center;padding-top: 20px;margin-bottom: 20px;">
            <a type="button" th:href="@{'http://'+${ip}+':7070/imin/'+${seckey} + '/'+${week_index}}">参加</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a type="button" th:href="@{'http://'+${ip}+':7070/imout/'+${seckey}}">下次一定</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a type="button" th:href="@{'http://'+${ip}+':7070/td/'+${seckey}}">退订</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        </div>
        <div class="design">
            <img src="http://r2g91o0lz.hn-bkt.clouddn.com/design.png">
        </div>
        <div class="tlg">
            <div class="tlg-text">
                <h4><span th:text="${remark}"></span></h4>
            </div>
            <div class="clear"></div>
        </div>
    </div>
</div>
</div>
</body>
</html>
<style>
    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, dl, dt, dd, ol, nav ul, nav li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
    }

    article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
        display: block;
    }

    ol, ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }


    img {
        max-width: 100%;
    }

    /*end reset*/
    /*--login start here--*/
    body {
        font-size: 100%;
        background: #FDF5E6;
        font-family: 'Roboto Slab', serif;
    }

    a {
        text-decoration: none;
    }

    a:hover {
        transition: 0.5s all;
        -webkit-transition: 0.5s all;
        -moz-transition: 0.5s all;
        -o-transition: 0.5s all;
    }

    /*--header start here--*/
    .newsletter {
        background: url(http://r2g91o0lz.hn-bkt.clouddn.com/banner.jpg) no-repeat;
        background-size: cover;
        min-height: 600px;
        width: 32%;
        margin: 4.5em auto 2em;
    }

    .newsletter-main {
        width: 90%;
        margin: 0 auto;
        padding: 0.5em 0em;
        text-align: center;
    }

    .stamp img {
        width: 13%;
    }

    .stamp {
        text-align: right;
    }

    .newsletter-main h1 {
        font-size: 2em;
        color: #000;
        font-weight: 300;
    }

    .newsletter-main h2 {
        font-size: 2em;
        color: #000;
        margin: 0em 0em 0.5em 0em;
    }

    .newsletter-main p {
        font-size: 1.1em;
        color: #000;
        line-height: 1.5em;
        width: 80%;
        margin: 0.5em auto 0.5em;
    }

    a.signup {
        font-size: 1.2em;
        color: #4882ce;
        font-weight: 600;
        display: block;
        margin: 0em 0em 1em 0em;
    }

    .newsletter-main input[type="text"] {
        font-size: 1em;
        color: #166ec4;
        padding: 0.8em 1em;
        border: 3px solid #4882ce;
        border-radius: 5px;
        display: inline-block;
        width: 80%;
        outline: none;
        text-align: center;
        margin: 0em auto 1em;

    }

    .newsletter-main input[type="submit"] {
        font-size: 1.2em;
        color: #fff;
        padding: 0.7em 2.5em;
        outline: none;
        border: none;
        border-radius: 5px;
        background: #166ec4;
        display: inline-block;
        margin-bottom: 1.1em;
        cursor: pointer;
        font-family: 'Roboto Slab', serif;
    }

    .newsletter-main input[type="submit"]:hover {
        background: #4882ce;
    }

    .tlg {
        margin: 1em 0em 1em 0em;
    }

    .tlg-img {
        float: left;
        width: 20%;
    }

    .tlg-text {
        float: right;
        width: 80%;
        text-align: left;
    }

    .tlg-text h3 {
        font-size: 1.6em;
        color: #166EC4;
    }

    .tlg-text h4 {
        font-size: 1em;
        color: #000;
    }

    .tlg-img img {
        width: 60%;
    }

    .clear {
        clear: both;
    }

    /*---copyrights--*/
    .copy-right {
        margin: 3em 0em 2em 0em;
    }

    .copy-right p {
        text-align: center;
        font-size: 1em;
        color: #fff;
        line-height: 1.5em;
        font-family: 'Quicksand', sans-serif;
    }

    .copy-right p a {
        color: #fff;
    }

    .copy-right p a:hover {
        color: #fff;
        text-decoration: underline;
        transition: 0.5s all;
        -webkit-transition: 0.5s all;
        -moz-transition: 0.5s all;
        -o-transition: 0.5s all;
    }

    /*--media quiries start here--*/
    @media (max-width: 1440px) {
        .newsletter-main p {
            width: 95%;
        }

        .newsletter {
            min-height: 580px;
        }
    }

    @media (max-width: 1280px) {
        .tlg-text h3 {
            font-size: 1.5em;
        }

        .tlg-text h4 {
            font-size: 1em;
        }

        .newsletter-main input[type="submit"] {
            margin-bottom: 1em;
        }

        .newsletter {
            width: 35%;
        }
    }

    @media (max-width: 1024px) {
        .newsletter {
            min-height: 600px;
            width: 45%;
        }

        .newsletter {
            min-height: 580px;
        }
    }

    @media (max-width: 768px) {
        .newsletter {
            width: 57%;
        }
    }

    @media (max-width: 640px) {
        .newsletter {
            width: 72%;
        }
    }

    @media (max-width: 480px) {
        .newsletter-main h1 {
            font-size: 1.5em;
        }

        .newsletter-main h2 {
            font-size: 1.5em;
        }

        .newsletter-main p {
            font-size: 0.95em;
        }

        a.signup {
            font-size: 1.1em;
            margin: 0em 0em 0.7em 0em;
        }

        .newsletter-main input[type="text"] {
            font-size: 0.85em;
            padding: 0.7em 1em;
        }

        .newsletter-main input[type="submit"] {
            font-size: 0.9em;
            margin-bottom: 1.5em;
        }

        .tlg-img img {
            width: 75%;
        }

        .tlg-text h3 {
            font-size: 1.3em;
        }

        .tlg-text h4 {
            font-size: 0.8em;
        }

        .newsletter {
            min-height: 475px;
        }

        .copy-right p {
            font-size: 0.9em;
        }
    }

    @media (max-width: 384px) {
        .newsletter {
            width: 80%;
        }
    }

    @media (max-width: 320px) {
        .newsletter-main h1 {
            font-size: 1.5em;
        }

        .newsletter-main h2 {
            font-size: 1.5em;
        }

        .newsletter-main p {
            font-size: 1em;
        }

        a.signup {
            font-size: 1.1em;
        }

        .newsletter-main input[type="text"] {
            font-size: 0.75em;
            padding: 0.7em 0.5em;
        }

        .newsletter-main input[type="submit"] {
            margin-bottom: 1em;
        }

        .design img {
            width: 70%;
        }

        .newsletter {
            width: 92%;
            min-height: 425px;
            margin: 1em auto;
        }

        .copy-right {
            margin: 1em 0em 1em 0em;
        }

        .copy-right p {
            font-size: 0.8em;
        }
    }
</style>